<script lang="ts" setup>
import type { Guide01ComponentMeta } from '@/definitions/type'
import { EWebDesignerComponentBackground } from '@/api/designer/model'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderGuide01.less'

defineOptions({
  name: 'RenderGuide01',
})
const props = defineProps<{
  render: Guide01ComponentMeta
}>()

const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
const bgsty = computed(() => {
  if (props.render.config.background === EWebDesignerComponentBackground.图片) {
    return { background: 'rgba(0, 0, 0, .6)' }
  }
  else { return {} }
})

function handleClick() {
}
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('followbox')">
      <div :class="prefix('followtitle')">
        {{ render.config.title }}
      </div>
      <div :class="prefix('followdesc')">
        {{ render.config.description }}
      </div>
      <!-- 添加按钮 -->
      <span v-if="render.config.isShowButton" :class="prefix('followbtn')" @click="handleClick">
        {{ render.config.buttonText }}
      </span>
    </div>
    <div :class="prefix('followbg')" :style="bgsty" />
  </div>
</template>
